<template>
  <div class="full-screen">
    <div class="bg">
      <div class="head-top">
        <div
          class="date"
          v-html="showDate"
        ></div>
        <div class="welcome">欢迎使用!</div>
      </div>
      <div class="control-box">
        <div
          class="control-button"
          @click="handleStart"
        >
          {{ btnText }}
          <span
            class="dot"
            v-if="btnText === '计算中'"
          >......</span>
        </div>
        <div
          class="control-button"
          @click="handleEnd"
        >结束</div>
      </div>
      <div class="content">
        <div class="left">
          <div class="angle">实时偏转角度： {{angleDataY}}&deg;</div>
          <cube-rotator :angleDataY="angleDataY" />
        </div>
        <div class="divider"></div>
        <div class="right">
          <div class="line-chart-nav">
            <div
              class="line-chart"
              style="width: 100%; height: 500px"
              id="line-chart"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import debounce from 'lodash/debounce';
import CubeRotator from "./components/CubeRotator.vue";

export default {
  components: {
    CubeRotator,
  },
  data() {
    return {
       socket: null,
      showDate: null,
      btnText: "开始",
      angleData: [],
      xAxisData: [],
      yAxisData: [],
      timer: null,
      myChart: null,
      angleDataY: 0,
      hasAngle: false
    };
  },
  mounted() {
    //大屏显示实时时间
    this.getCurrentTime();
    this.initChart();

    
  },
  methods: {
    getCurrentTime() {
      this.$moment.locale("zh-cn", {
        monthsShort: "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split(
          "_"
        ),
        weekdays: "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
      });

      this.showDate = this.$moment().format("YYYY-MM-DD HH:mm:ss");
      setInterval(() => {
        this.showDate = this.$moment().format("YYYY-MM-DD HH:mm:ss");
      }, 1000);
    },
    initChart() {
      this.myChart = this.$echarts.init(document.getElementById("line-chart"));
    },
    getConnect() {
      let _this = this
      let lastProcessedTime = 0;
      const debounceInterval = 1000; // 1秒
      if("WebSocket" in window){
        _this.socket = new WebSocket('ws://localhost:3000');

        _this.socket.onopen = (res) => {
          console.log("onopen 连接成功==========>", res);
          _this.socket.send("可以开始啦。。。")
        };

        _this.socket.onmessage = (data) => {
          console.log("onmessage 有新消息啦=======>", JSON.parse(data.data));
          let res = JSON.parse(data.data);
          const now = Date.now();
            if (now - lastProcessedTime > debounceInterval) {
              // 执行数据处理逻辑
              _this.handleServerMessage(res)
              lastProcessedTime = now;
            }
        };

        _this.socket.onclose = () => {
          console.log("onclose websocket连接关闭=======>");
        };
        _this.socket.onerror = (error) => {
          console.log("onerror 发生错误==========>", error);
        };
      }else{
        alert("您的浏览器不支持显示消息请更换");
      }
    },
    handleServerMessage(res) {
      this.xAxisData.push(res.time);
      this.yAxisData.push(res.value);
      if (this.xAxisData.length > 10) {
        this.xAxisData.shift();
        this.yAxisData.shift();
      }
      //画曲线图
      this.createChart(this.xAxisData, this.yAxisData);
      this.angleDataY = res.value
      this.hasAngle = true
      this.btnText = '开始'
    },
    handleStart() {
      let _this = this;
      if (_this.timer) {
        clearInterval(_this.timer);
      }
      if(!_this.socket){
        _this.getConnect()
      }else{
        alert("正在运行中...")
        return false
      }
      _this.btnText = '计算中'
    },
    createChart(xAxisData, yAxisData) {
      let _this = this;
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff",
            },
          },
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "6px",
          top: "5%",
          containLabel: true,
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#2a527f",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#ffffff",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            data: xAxisData,
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#2a527f",
              },
            },
            axisLabel: {
              inside: false,
              textStyle: {
                color: "#ffffff",
                fontWeight: "normal",
                fontSize: "16",
              },
            },
          },
        ],
        series: [
          {
            name: "偏转角度",
            type: "line",
            data: yAxisData,
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 2,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#FFE68B", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#15EEBA", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      };
      _this.myChart.setOption(option);
    },
    handleEnd() {
      let _this = this;
      if (_this.socket) {
        _this.socket.close();
        _this.socket = null
        _this.angleDataY = 0
        _this.hasAngle = false
      }

      if (_this.timer) {
        clearInterval(_this.timer);
      }
    },
  },
};
</script>
<style scoped>
@import "./assets/css/common.css";
@import "./assets/css/screen.css";
</style>
